<!-- PC -->
<!-- 通用顶部导航栏 -->
<head>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<style>
    .top-list
    {
        border: solid red 2px;
    }
    .top-list > .item-wrapper1,.item-wrapper2,.item-wrapper3,.item-wrapper4
    {
        display: inline-flex;
        flex-direction: column;
        /* border: solid yellow 2px; */
    }
    .top-list > div > a
    {
        text-decoration: none;
        color: black;
    }
    .top-list > .item-wrapper1:hover
    {
        background-color: red;
    }
    .top-list > .item-wrapper2:hover
    {
        background-color: yellow;
    }
    .top-list > .item-wrapper3:hover
    {
        background-color: blue;
    }
    .top-list > .item-wrapper4:hover
    {
        background-color: green;
    }
</style>
<div class="top-list">
    <div class="item-wrapper1">
        <i class="fa fa-lemon-o" aria-hidden="true"></i>
        <a href="a">第1项</a>
    </div>
    <div class="item-wrapper2">
        <i class="fa fa-lemon-o" aria-hidden="true"></i>
        <a href="a">第2项</a>
    </div>
    <div class="item-wrapper3">
        <i class="fa fa-lemon-o" aria-hidden="true"></i>
        <a href="a">第3项</a>
    </div>
    <div class="item-wrapper4">
        <i class="fa fa-lemon-o" aria-hidden="true"></i>
        <a href="a">第4项</a>
    </div>
</div>